//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------


@media (max-width: 767px)


  #frontpage,
  #new_session

    .explanation
      h3
        font-size: 15px
        line-height: 24px
        text-align: right
      h4
        font-size: 13px
        text-align: right
    
    #sign_in
      width: 50%
      margin: 10px 25% 0
      padding: 0
      float: none
      h3
        margin: 0px 12px 0px 0
      form.new_user
        padding: 0 10px
        .login_data
          #user_mail,
          #user_password
            width: 96%

    #presentation
      .characteristics
        width: 27%
        margin-left: 0 !important



  #registration
    width: 100%
    .registration
      width: 50%
      margin-left: 25%
      margin-right: 25%
      h3
        margin: 0px 12px 10px 0
      #new_user
        padding: 0 10px
        .login_data
          input
            &[type="password"]
              width: 96% !important
          input
            &[type="text"]
              width: 96% !important



  #forgot-pass,
  #confirmation,
  #login
    margin-left: 0
    .forgot,
    .instructions,
    .change
      @include grid-core-span(12, $fluidGridColumnWidth, $fluidGridGutterWidth)
      margin-top: 0px
      padding: 0 
      h2
        margin: 0
        font-size: 25.5px
        margin-left: 2% !important
      
      #new_user
        margin: 0
        width: 96% !important
        padding-left: 4%

      .password,
      .confirmation
        width: 90%
        padding: 1% 5%
        float: none
        form
          margin: 0
        input
          &[type="submit"]
            float: right





// UP TO LANDSCAPE PHONE
// ---------------------

@media (max-width: 480px)


  #frontpage,
  #new_session
    .explanation

    #sign_in
      @include grid-core-span(12, $fluidGridColumnWidth, $fluidGridGutterWidth)
      margin-left: 0
      padding: 0
      h3
        margin: 0px 12px 10px 0
      #remember
        width: 36%
        float: left
    #presentation
      .characteristics
        width: 100% !important
        margin-left: 0 !important
        padding: 0


  #registration
    width: 100%
    .registration
      width: 100%
      margin: 0
      float: none 


